<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Pokemon Card Holo Effect</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900">
		<link rel="stylesheet" href="pokemonCard.css" />
	</head>
	<body>
		<main id=app>
			<p>Please checkout the newer version of this; <a target="_top"
					href="https://codepen.io/simeydotme/pen/abYWJdX">https://codepen.io/simeydotme/pen/abYWJdX</a></p>
			<h1>Pokemon Card, Holo Effect</h1>
			<section class="cards">
				<div class="card charizard animated"></div>
				<div class="card pika animated"></div>
				<div class="card eevee animated"></div>
				<div class="card mewtwo animated"></div>
			</section>

			<style class="hover"></style>

			<section class="demo">
				<div class="card"></div>
				<span class="operator">+</span>
				<div class="card"><span>color-dodge</span></div>
				<span class="operator">+</span>
				<div class="card"><span>color-dodge</span></div>
			</section>

		</main>
		<section class="promo">
			<p>
				<a target="_top" href="https://codepen.io/simeydotme/pen/abYWJdX">
					View Version 2, much improved here
					<img src="https://assets.codepen.io/13471/internal/screenshots/pens/abYWJdX.custom.png?version=1674760356"
						alt="">
				</a>
			</p>
		</section>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<script src="pokemonCard.js"></script>
	</body>
</html>